import React from 'react';
import './ControlPanel.css';

const ControlPanel = ({ 
  onLoadDicom, 
  onProcess, 
  isProcessing, 
  dicomData,
  processedImages,
  enableInvert = true,
  onInvertChange,
  colorMap = 'jet',
  onColorMapChange,
  onDownloadResults,
  enableInterpolation = true,
  onInterpolationChange,
  frameRange = { start: 1, end: 1 },
  onFrameRangeChange,
  enableVesselExtraction = false,
  onVesselExtractionChange,
  processingMethod = 'normal',
  onProcessingMethodChange,
  hasArterialInputPoint = false
}) => {
  const hasProcessedData = Object.values(processedImages).some(data => data);

  return (
    <div className="control-panel">
      <div className="panel-header">
        <h2>控制面板</h2>
      </div>

      <div className="panel-section">
        <h3>📁 数据加载</h3>
        <div className="section-content">
          <button 
            className="panel-btn primary"
            onClick={onLoadDicom}
          >
            <span className="btn-icon">📂</span>
            <span className="btn-text">加载DICOM文件</span>
          </button>
          
          {dicomData && (
            <div className="data-info">
              <div className="info-item">
                <span className="info-label">
                  {dicomData.isMultiFrame ? '帧数:' : '序列:'}
                </span>
                <span className="info-value">
                  {dicomData.isMultiFrame 
                    ? `${dicomData.metadata.numberOfFrames} 帧` 
                    : `${dicomData.images?.length || 0} 帧`
                  }
                </span>
              </div>
              {dicomData.isMultiFrame && (
                <div className="info-item">
                  <span className="info-label">类型:</span>
                  <span className="info-value">多帧DICOM</span>
                </div>
              )}
              <div className="info-item">
                <span className="info-label">尺寸:</span>
                <span className="info-value">
                  {dicomData.metadata?.rows || '未知'}×{dicomData.metadata?.columns || '未知'}
                </span>
              </div>
              <div className="info-item">
                <span className="info-label">患者:</span>
                <span className="info-value">{dicomData.metadata?.patientName || '未知'}</span>
              </div>
              <div className="info-item">
                <span className="info-label">模态:</span>
                <span className="info-value">{dicomData.metadata?.modality || '未知'}</span>
              </div>
            </div>
          )}
        </div>
      </div>

      <div className="panel-section">
        <h3>⚙️ 图像处理</h3>
        <div className="section-content">
          <div className="processing-options">
            <label className="option-item">
              <input
                type="checkbox"
                checked={enableInvert}
                onChange={(e) => onInvertChange && onInvertChange(e.target.checked)}
                disabled={isProcessing}
              />
              <span className="option-text">
                <span className="option-icon">🔄</span>
                <span>图像反转 (DSA建议开启)</span>
              </span>
            </label>
            <div className="option-description">
              反转像素值，使血管区域变为亮区域，适用于DSA血管造影图像
            </div>
            
            <label className="option-item">
              <input
                type="checkbox"
                checked={enableVesselExtraction}
                onChange={(e) => onVesselExtractionChange && onVesselExtractionChange(e.target.checked)}
                disabled={isProcessing}
              />
              <span className="option-text">
                <span className="option-icon">🩸</span>
                <span>血管区域提取</span>
              </span>
            </label>
            <div className="option-description">
              根据TDC曲线变化幅度自动区分前景和背景，突出血管区域
            </div>
          </div>
          
          <div className="processing-method-control">
            <label className="method-select-label">
              <span className="method-icon">🧮</span>
              <span>计算方法</span>
            </label>
            <select 
              className="method-select"
              value={processingMethod || 'normal'}
              onChange={(e) => onProcessingMethodChange && onProcessingMethodChange(e.target.value)}
              disabled={isProcessing}
            >
              <option value="normal">普通方法</option>
              <option value="maximum_slope">最大斜率法</option>
            </select>
            
            {processingMethod === 'maximum_slope' && (
              <div className="arterial-input-notice">
                <span className="notice-icon">⚠️</span>
                <span className="notice-text">
                  最大斜率法需要先标记动脉输入点。请在图像中添加动脉输入点标记。
                </span>
              </div>
            )}
          </div>
          
          <button 
            className="panel-btn primary"
            onClick={onProcess}
            disabled={!dicomData || isProcessing || (processingMethod === 'maximum_slope' && !hasArterialInputPoint)}
            title={processingMethod === 'maximum_slope' && !hasArterialInputPoint ? '最大斜率法需要标记动脉输入点' : ''}
          >
            <span className="btn-icon">{isProcessing ? '⏳' : '🚀'}</span>
            <span className="btn-text">
              {isProcessing ? '处理中...' : '开始处理'}
            </span>
          </button>
          
          {dicomData && (
            <div className="frame-range-control">
              <div className="frame-range-header">
                <span className="frame-range-label">
                  <span className="frame-range-icon">📊</span>
                  <span>帧范围设置</span>
                </span>
                <span className="frame-range-display">
                  第 {frameRange.start} 帧 - 第 {frameRange.end} 帧 
                  ({frameRange.end - frameRange.start + 1} 帧)
                </span>
              </div>
              
              <div className="frame-range-sliders">
                <div className="slider-row">
                  <label className="slider-label">起始帧:</label>
                  <input
                    type="range"
                    min="1"
                    max={dicomData.isMultiFrame ? dicomData.metadata.numberOfFrames : dicomData.images?.length || 1}
                    value={frameRange.start}
                    onChange={(e) => {
                      const newStart = parseInt(e.target.value);
                      const newEnd = Math.max(newStart, frameRange.end);
                      onFrameRangeChange && onFrameRangeChange({ start: newStart, end: newEnd });
                    }}
                    disabled={isProcessing}
                    className="frame-range-slider"
                  />
                  <span className="slider-value">{frameRange.start}</span>
                </div>
                
                <div className="slider-row">
                  <label className="slider-label">终止帧:</label>
                  <input
                    type="range"
                    min="1"
                    max={dicomData.isMultiFrame ? dicomData.metadata.numberOfFrames : dicomData.images?.length || 1}
                    value={frameRange.end}
                    onChange={(e) => {
                      const newEnd = parseInt(e.target.value);
                      const newStart = Math.min(frameRange.start, newEnd);
                      onFrameRangeChange && onFrameRangeChange({ start: newStart, end: newEnd });
                    }}
                    disabled={isProcessing}
                    className="frame-range-slider"
                  />
                  <span className="slider-value">{frameRange.end}</span>
                </div>
              </div>
              
              <div className="frame-range-description">
                仅处理指定帧范围内的图像数据进行参数计算
              </div>
            </div>
          )}
          
          {!dicomData && (
            <div className="warning-message">
              <span className="warning-icon">⚠️</span>
              <span className="warning-text">请先加载DICOM数据</span>
            </div>
          )}
          
          {hasProcessedData && (
            <div className="process-results">
              <h4>处理结果</h4>
              <div className="result-grid">
                {processedImages.ttp && (
                  <div className="result-item completed">
                    <span className="result-icon">✅</span>
                    <span className="result-name">TTP</span>
                  </div>
                )}
                {processedImages.mtt && (
                  <div className="result-item completed">
                    <span className="result-icon">✅</span>
                    <span className="result-name">MTT</span>
                  </div>
                )}
                {processedImages.ph && (
                  <div className="result-item completed">
                    <span className="result-icon">✅</span>
                    <span className="result-name">PH</span>
                  </div>
                )}
                {processedImages.auc && (
                  <div className="result-item completed">
                    <span className="result-icon">✅</span>
                    <span className="result-name">AUC</span>
                  </div>
                )}
                {processedImages.cbf && (
                  <div className="result-item completed">
                    <span className="result-icon">✅</span>
                    <span className="result-name">CBF</span>
                  </div>
                )}
                {processedImages.cbv && (
                  <div className="result-item completed">
                    <span className="result-icon">✅</span>
                    <span className="result-name">CBV</span>
                  </div>
                )}
              </div>
              
              <button 
                className="panel-btn secondary download-btn"
                onClick={onDownloadResults}
                disabled={isProcessing}
                title="导出处理计划：DICOM + NIfTI参数图、血管Mask (如果有)、TDC标记LabelSet + JSON标注文件 (如果有)"
              >
                <span className="btn-icon">💾</span>
                <span className="btn-text">导出计划</span>
              </button>
            </div>
          )}
        </div>
      </div>

      <div className="panel-section">
        <h3>🎨 显示设置</h3>
        <div className="section-content">
          <div className="display-options">
            <label className="option-label">
              <span className="option-icon">🌈</span>
              <span>伪彩色映射:</span>
            </label>
            <select 
              className="colormap-select"
              value={colorMap}
              onChange={(e) => onColorMapChange && onColorMapChange(e.target.value)}
            >
              <option value="jet">Jet (蓝-青-绿-黄-红)</option>
              <option value="hot">Hot (黑-红-黄-白)</option>
              <option value="cool">Cool (青-蓝-紫)</option>
              <option value="gray">Gray (灰度)</option>
              <option value="rainbow">Rainbow (彩虹)</option>
              <option value="viridis">Viridis (紫-蓝-绿-黄)</option>
            </select>
            <div className="option-description">
              选择不同的颜色映射方案来显示参数图像
            </div>
          </div>

          <div className="display-options">
            <label className="option-item">
              <input
                type="checkbox"
                checked={enableInterpolation}
                onChange={(e) => onInterpolationChange && onInterpolationChange(e.target.checked)}
              />
              <span className="option-text">
                <span className="option-icon">🔍</span>
                <span>图像插值</span>
              </span>
            </label>
            <div className="option-description">
              启用后图像缩放时使用插值算法，获得更平滑的显示效果；禁用时保持像素化显示
            </div>
          </div>
        </div>
      </div>

      <div className="panel-section">
        <h3>📊 快捷操作</h3>
        <div className="section-content">
          <div className="shortcut-grid">
            <div className="shortcut-item">
              <span className="shortcut-key">Ctrl+O</span>
              <span className="shortcut-desc">打开文件</span>
            </div>
            <div className="shortcut-item">
              <span className="shortcut-key">Ctrl+P</span>
              <span className="shortcut-desc">开始处理</span>
            </div>
            <div className="shortcut-item">
              <span className="shortcut-key">Ctrl+S</span>
              <span className="shortcut-desc">导出计划</span>
            </div>
            <div className="shortcut-item">
              <span className="shortcut-key">Ctrl+I</span>
              <span className="shortcut-desc">切换插值</span>
            </div>
            <div className="shortcut-item">
              <span className="shortcut-key">滚轮</span>
              <span className="shortcut-desc">缩放图像</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ControlPanel; 